<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>购物车-练习</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 1000px;
			height: 560px;
			margin: 50px auto;
		}
		table{
			width: 100%;
			border-collapse: collapse;/*设置边框不重复*/
		}
		/*表头*/
		.title td{
			width: 25%;
			height: 50px;
			background-color: #c36;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
			color:#fff;
			font-weight: bold;
		}
		/*表体  商品内容体*/
		table tr td{
			width: 25%;
			height:100px;
			text-align: center;
		}
		table tr td.img{
			background: no-repeat center center/40%;
		}
		/*数量栏*/
        table tr td.num p{
        	width: 110px;
        	height: 30px;
        	margin: 0 auto;
        	line-height: 30px;
        	border: 1px solid #ddd;
        }
        /*添加*/
        table tr td.num p span.add{
        	float: right;
        }
        /*减少*/
        table tr td.num p span.minus{
        	float: left;
        }
        /*+ - 公共样式*/
        table tr td.num p span.add,table tr td.num p span.minus{
        	width: 30px;
        	height: 30px;
        	background-color: #bbb;
        }
		.all{
			width: 1000px;
			height: 50px;
			margin-top: 15px; 
			line-height: 50px;
			background-color: #c36;
		}
		.all p{
			float: left;
			font-size: 14px;
		}
		.all p span{
			font-size: 16px;
			color:#ffd79e;
			font-weight: bold;
			padding:0 10px;
		}
		.all p.p1{
			margin-left: 550px;
		}
		.all p.p2{
			margin-left: 100px;
		}
	</style>
</head>
<body>

	<div class="box">
		<table border="1">
			<!--表头-->
			<tr class="title">
				<td>商品</td>
				<td>单价</td>
				<td>数量</td>
				<td>小计</td>
			</tr>
			<!--商品内容区-->
			<tr>
				<td class="img" style="background-image: url(imgs/shop1.jpg);"></td>
				<td class="unit">8</td>
				<td class="num">
					<p>
						<span class="minus">-</span>
						<span class="count">0</span>
						<span class="add">+</span>	
					</p>
				</td>
				<td class="price">0</td>
			</tr>
			<tr>
				<td class="img" style="background-image: url(imgs/shop2.jpg);"></td>
				<td class="unit">10</td>
				<td class="num">
					<p>
						<span class="minus">-</span>
						<span class="count">0</span>
						<span class="add">+</span>	
					</p>
				</td>
				<td class="price">0</td>
			</tr>
			<tr>
				<td class="img" style="background-image: url(imgs/shop3.jpg);"></td>
				<td class="unit">12.5</td>
				<td class="num">
					<p>
						<span class="minus">-</span>
						<span class="count">0</span>
						<span class="add">+</span>	
					</p>
				</td>
				<td class="price">0</td>
			</tr>
			<tr>
				<td class="img" style="background-image: url(imgs/shop4.jpg);"></td>
				<td class="unit">23</td>
				<td class="num">
					<p>
						<span class="minus">-</span>
						<span class="count">0</span>
						<span class="add">+</span>	
					</p>
				</td>
				<td class="price">0</td>
			</tr>
		</table>
		<!--底部-->
		<div class="all">
			<p class="p1">已选中商品的件数:<span id="totalNum">0</span>件</p>
			<p class="p2">总价格:<span class="totalPrice">0</span></p>
		</div>
	</div>
	<script type="text/javascript">
		var oBox = document.getElementById("box"),
		aAdd = document.getElementsByClassName("add"),
		aMinus= document.getElementsByClassName("minus"),
		aPrice= document.getElementsByClassName("price"),
		aUnit= document.getElementsByClassName("unit"),
		aCount = document.getElementsByClassName("count"),
		oTotalNum = document.getElementById("totalNum"),
		oTotalPrice = document.getElementsByClassName("totalPrice")[0],
		length = aAdd.length,
		arrNum = [];//存储每个的个数
		arrUnit = [];//存储单价
		
		for (var i = 0; i < length; i++) {
			//初始化件数与单价
			arrNum[i]=0;
			arrUnit[i] = aUnit[i].innerHTML-0;
			//点击加号数量增加
			aAdd[i].i = i;
			aAdd[i].onclick = function(){
				var index = this.i;
				arrNum[index]++;
				changeNum(index);
				
			};
			//点击减号数量减少
			aMinus[i].i = i;
			aMinus[i].onclick = function(){
				var index = this.i;

				arrNum[index] --;
				if(arrNum[index]<=0){
					arrNum[index] = 0;
				}
				changeNum(index);
			};
		}
		//价格公共方法计算
		function changeNum(x){
			//求出所有数量的和与总价
			var sumNum = 0,sumPrice = 0;
			for (var i = 0; i < length; i++) {
				sumNum += arrNum[i];
				sumPrice += arrNum[i]*arrUnit[i];
			}
			aCount[x].innerHTML = arrNum[x];//数量获取
			aPrice[x].innerHTML = aCount[x].innerHTML * aUnit[x].innerHTML;//小计计算
			oTotalNum.innerHTML = sumNum;//总数量计算
			oTotalPrice.innerHTML = sumPrice;//总价计算
		}
		
	</script>
</body>
</html>